<template>
  <div class="box">
    <div class="con_box cleb">
      <div class="con_logo cleb">
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/logo.jpg" />
      </div>
      <div class="yang_title cleb">
        <div class="title cleb">
          <h2>抑制癌症风暴中的欧米伽3</h2>
          <h3>国际专家大讨论</h3>
          <p>主办单位：全国卫生产业管理协会食品经营健康产品分会 增爱公益基金会</p>
        </div>
      </div>
      <div class="yang_video cleb">
        <a href class="yuyue">恭喜您！您已成功预约！</a>
        <div class="ren_len cleb">
          当前已预约人数
          <span>{{num}}</span>人
        </div>
      </div>
      <div class="yang_time cleb">
        <!-- <div class="name">距离直播开始时间：</div>
        <div id="show">
          <span>{{days}}</span>天
          <span>{{hours}}</span>小时
          <span>{{minutes}}</span>分钟
          <span>{{seconds}}</span>秒
        </div> -->
        <a  href="javascript:;"  @click="detail(e)">
          观看预告片
          <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/jt.png" />
        </a>
      </div>
      <!-- <div class="yang_href cleb">
            <div class="href">学习更多健康资讯请点击 <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/sz.png"/></div>
            <a href="">预约答题</a>
      </div>-->

      <div class="yang_span">
        <h3>关注系列直播课程</h3>
        <div class="cleb">
          <div>
            <a href>•慢病专题讨论•</a>
          </div>
        </div>
      </div>
    </div>
    <div class="img-wrap link1">
      <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v0329.jpg" />
      <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/v03292.jpg" />
    </div>
  </div>
</template>
<script>
import { wxshare } from "common/mixin";
import { getBookedNum } from "api/activity";
export default {
  mixins: [wxshare],
  data() {
    return {
      num: "",
      days: "",
      hours: "",
      minutes: "",
      seconds: "",
      isShowTime: true
    };
  },
  created() {
    getBookedNum().then(res => {
      console.log(111, res);
      this.num = res.data || 60;
    });
    this.TimeDown("show", "2020-03-30 10:00:00");
  },
  methods: {
    detail(e) {
      location.href = "https://mp.weixin.qq.com/s/rvlT_SZ3Ot0egxNNbNKtvw";
    },
    TimeDown(id, endDateStr) {
      //结束时间
      var endDate = new Date(endDateStr);
      //当前时间
      var nowDate = new Date();
      //相差的总秒数
      var totalSeconds = parseInt((endDate - nowDate) / 1000);
      if (totalSeconds > 0) {
        this.isShowTime = true;
      } else {
        this.isShowTime = false;
      }
      //天数
      this.days = Math.floor(totalSeconds / (60 * 60 * 24));
      //取模（余数）
      var modulo = totalSeconds % (60 * 60 * 24);
      //小时数
      this.hours = Math.floor(modulo / (60 * 60));
      modulo = modulo % (60 * 60);
      //分钟
      this.minutes = Math.floor(modulo / 60);
      //秒
      this.seconds = modulo % 60;
      setTimeout(() => {
        this.TimeDown(id, endDateStr);
      }, 1000);
    }
  }
};
</script>
<style lang="less" scoped>
.img-wrap {
  img {
    vertical-align: top;
    display: block;
    width: 100%;
  }
}

.con_box {
  background: #fff;
  padding: 0.75rem 0.05rem;
  padding-bottom: 1rem;
}
.con_logo {
  margin-bottom: 1.25rem;
}
.con_logo img {
  width: 6.2rem;
  height: 1.2rem;
  float: right;
}
.yang_title {
  text-align: center;
  padding: 0.85rem;
}
.yang_title h2 {
  color: #2e569b;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.5rem;
}
.yang_title h3 {
  color: #656565;
  font-size: 0.9rem;
}
.yang_title p {
  color: #5f5f5f;
  font-size: 0.475rem;
  margin-top: 0.25rem;
}

.yang_video {
  text-align: center;
  margin-top: 0.75rem;
}
.yang_video .yuyue {
  font-size: 0.825rem;
  color: #ff0000;
  font-weight: bold;
}
.yang_video .ren_len {
  color: #2e569b;
  font-size: 0.75rem;
  line-height: 1.3rem;
  margin-top: 0.5rem;
}
.ren_len span {
  color: #ffffff;
  font-size: 0.725rem;
  background: #2e569b;
  width: 3.25rem;
  height: 1.3rem;
  border-radius: 1.75rem;
  display: inline-block;
  margin: 0.25rem;
}

.yang_time {
  text-align: center;
  margin-top: 0.75rem;
}
.yang_time .name {
  font-size: 0.725rem;
  color: #2e569b;
}
.yang_time a {
  color: #ffffff;
  font-size: 0.725rem;
  background: #2e569b;
  height: 1.3rem;
  border-radius: 0.175rem;
  display: inline-block;
  padding: 0 0.5rem;
  line-height: 1.3rem;
  margin-top: 1rem;
}
.yang_time a img {
  width: 0.375rem;
  margin-top: -0.15rem;
}
#show {
  font-size: 0.65rem;
  color: #2e569b;
  margin-top: 0.5rem;
}
#show span {
  color: #ffffff;
  font-size: 0.65rem;
  width: 1.55rem;
  height: 1rem;
  line-height: 1rem;
  border-radius: 0.1rem;
  background: #2e569b;
  display: inline-block;
  margin: 0 0.5rem;
}
.yang_href {
  text-align: center;
  margin-top: 1.875rem;
  padding: 1rem 0;
  border-top: 1px dashed #cccccc;
  border-bottom: 2px dashed #cccccc;
}
.yang_href .href {
  color: #2e569b;
  font-size: 0.65rem;
  width: 5.5rem;
  margin: 0 auto;
}
.yang_href .href img {
  width: 0.375rem;
}
.yang_href a {
  color: #fff;
  font-size: 0.65rem;
  background: #ff0000;
  width: 4.1rem;
  height: 1.3rem;
  display: inline-block;
  border-radius: 0.175rem;
  line-height: 1.3rem;
  margin-top: 0.375rem;
}
.yang_span {
  text-align: center;
  margin-top: 1.05rem;
}
.yang_span h3 {
  color: #2e569b;
  font-size: 1.1rem;
  font-weight: bold;
}
.yang_span a {
  color: #656565;
  font-size: 0.925rem;
  margin-top: 0.25rem;
  display: inline-block;
}
</style>
